<template>
  <div class="temp_art">
    <!-- 固定头部 -->
    <div class="article_top clearfix" ref="top"
    v-bind:style="`background:rgba(255,255,255,${num})`">
      <div class="edit f_left" v-on:click="backFn">
        <span class="iconfont icon-fenxiang"></span>
      </div>
      <div class="title f_right" v-if="isShow">
        <span>{{ title }}</span>
        <span>一二月一三</span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="article_con">
      <div class="them_title">
        <div class="them">
          <span>{{ title }}</span>
          <span>一二月一三</span>
        </div>
      </div>
      <div class="them_con">
        <p>{{ content }}</p>
      </div>
    </div>
    <!-- 想法 -->
    <div class="article_idea">
      <div class="idea-a">
        <span>想法</span>
      </div>
      <div class="idea_b">
        <div>
          <img src="../assets/img/boji.jpg" alt="" />
        </div>
        <div class="b_right">
          <span @click="discuFn">写点什么吧...</span>
        </div>
      </div>
    </div>
    <!-- 评论内容 -->
    <div class="discuss_user">
      <ul>
        <li>
          <div class="art_dis" v-if="show">
            <!-- 用户头像 -->
            <div class="art_user clearfix">
              <div class="art_icon">
                <img src="../assets/img/boji.jpg" alt="boji" />
              </div>
              <div class="art_title">
                <span>波吉</span>
              </div>
            </div>
            <!-- 用户评论 -->
            <div class="art_ideas">
              <span>{{ msg }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // title: this.$route.params.title,
      // content: this.$route.params.content,
      title: "",
      content: "",
      isShow: false,
      height: 60,
      msg: this.$route.params.talk,
      num : 0,
      show : false,
      isRead : false,
    };
  },
  methods: {
    //返回上一级
    backFn() {
      this.$router.push('/home');
      sessionStorage.setItem('isRead',this.isRead);
    },
    getMsg() {
       if(this.msg.length != 0){
         this.show = true;
       }
    },
    //滚动显示和隐藏
    scrollFn(dom) {
      let t = dom.scrollTop;
      //  console.log(this.$refs.top);
      // let top = document.querySelector(".article_top");
      //  console.log(t);
      //  console.log(top);
      if (t > this.height) {
        this.num = 0.5;
        this.isShow = true;
      } else {
        this.num = 0;
        this.isShow = false;
      }
    },
    //点击跳转
    discuFn() {
      this.$router.replace("/pcdis");
    },
  },
  created() {
    let data = JSON.parse(localStorage.getItem("obj"));
    let title = data.title;
    let content = data.content;
    this.title = title;
    this.content = content;
    // console.log(data);
    // console.log(title,content);
    this.getMsg();
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener("scroll", () => {
        this.scrollFn(document.documentElement);
      });
    });
    // this.msg = localStorage.getItem('msg');
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/reset.css";
@import "../assets/common/variable.scss";

.temp_art {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}
.article_top {
  width: 100%;
  height: 60px;
  position: fixed;
  background: rgba(255, 255, 255, 0);
  div {
    height: 60px;
  }
  .edit {
    width: 60px;
    line-height: 60px;
    transform: rotate(-90deg);
    span {
      padding-left: $pl;
      font-size: 30px;
    }
  }
  .title {
    width: 100px;
    margin-top: 10px;
    span {
      display: block;
      &:first-child {
        font-size: 22px;
      }
      &:last-child {
        font-size: 12px;
      }
    }
  }
}
.article_con {
  .them_title {
    height: 200px;
    padding-top: 60px;
    .them {
      writing-mode: tb-rl;
      height: 180px;
      margin-left: 280px;
      padding-top: 10px;
    }
    span {
      display: block;
      &:first-child {
        font-size: 30px;
      }
    }
  }
  .them_con {
    font-size: 20px;
    padding-left: $pl;
    padding-right: $pl;
    padding-bottom: 50px;
  }
}
// 想法
.article_idea {
  border-top: 1px solid #ccc;
  .idea-a {
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    padding-left: 15px;
  }
  .idea_b {
    height: 100px;
    margin-left: 15px;
    div {
      float: left;
    }
    .b_right {
      margin-left: 5px;
      margin-top: 20px;
    }
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    span {
      font-size: 18px;
      color: #808080;
      padding-left: 15px;
    }
  }
}
// 评论
.discuss_user {
  width: 100%;
  height: 100%;
  ul li {
    height: 150px;
    margin-top: 5px;
    .art_dis {
      height: 80px;
      //用户头像
      .art_user {
        height: 45px;
        div {
          float: left;
        }
        .art_icon {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          background: powderblue;
          margin-left: 15px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: block;
          }
        }
        .art_title {
          line-height: 45px;
          padding-left: 15px;
          font-size: 16px;
          color: $color;
        }
      }
      //用户评论
      .art_ideas {
        height: 100px;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>